<div ng-init="types=['Latitude/Longitude', 'GeoJSON']; projection=['mercator', 'albersUsa', 'albers', 'hammer', 'winkel13'];">
	<h4>Geography</h4>

	<vde-property label="Type" type="select" options="types" item="transform" property="geoType" ng-model="transform.geoType" nodrop="1" style="full"></vde-property>

	<div ng-show="transform.geoType != 'GeoJSON'">
		<vde-property label="Latitude" type="field" item="transform" property="lat" ng-model="transform.properties.lat" field="transform.properties.lat" can-drop-style="left" style="half"></vde-property>

		<vde-property label="Longitude" type="field" item="transform" property="lon" ng-model="transform.properties.lon" field="transform.properties.lon" can-drop-style="left" style="half"></vde-property>
		<br clear="all" />
	</div>

	<div ng-show="transform.geoType == 'GeoJSON'">
		<vde-property label="GeoJSON" type="field" item="transform" property="value" ng-model="transform.properties.value" field="transform.properties.value" can-drop-style="left" style="full"></vde-property>
	</div>

	<h4>Projection</h4>

	<vde-property label="Type" type="select" options="projection" item="transform" property="projection" ng-model="transform.properties.projection" nodrop="1" style="full"></vde-property>

	<vde-property label="Scale" type="number" item="transform" property="scale" ng-model="transform.properties.scale" nodrop="1" style="half-float"></vde-property>

	<vde-property label="Rotate" type="number" item="transform" property="rotate" ng-model="transform.properties.rotate" nodrop="1" style="half-float"></vde-property>

	<br clear="all" />
	
	<h4>Center</h4>

	<vde-property label="X" type="number" item="transform" property="center[0]" ng-model="transform.properties.center[0]" nodrop="1" style="half-float"></vde-property>

	<vde-property label="Y" type="number" item="transform" property="center[1]" ng-model="transform.properties.center[1]" nodrop="1" style="half-float"></vde-property>

	<br clear="all" />

	<h4>Translate</h4>

	<vde-property label="X" type="number" item="transform" property="translate[0]" ng-model="transform.properties.translate[0]" nodrop="1" style="half-float"></vde-property>

	<vde-property label="Y" type="number" item="transform" property="translate[1]" ng-model="transform.properties.translate[1]" nodrop="1" style="half-float"></vde-property>

	<br clear="all" />

	<h4>Advanced</h4>

	<vde-property label="Precision" type="number" item="transform" property="precision" ng-model="transform.properties.precision" nodrop="1" style="half-float"></vde-property>

	<vde-property label="Clip Angle" type="number" item="transform" property="clipAngle" ng-model="transform.properties.clipAngle" nodrop="1" style="half-float"></vde-property>

	<br clear="all" />

	<div ng-show="(transform.geoType != 'GeoJSON' && transform.properties.lat && transform.properties.lon) || (transform.geoType == 'GeoJSON' && transform.properties.value.field)">
		<vde-property label="Output" ng-if="transform.pipelineName" style="full">
			<div ng-show="transform.geoType != 'GeoJSON' && transform.properties.lat && transform.properties.lon">
				<vde-binding field="transform.output.x" draggable="1"></vde-binding>
				<vde-binding field="transform.output.y" draggable="1"></vde-binding>
			</div>

			<div ng-show="transform.geoType == 'GeoJSON' && transform.properties.value.field">
				<vde-binding field="transform.output.path" draggable="1"></vde-binding>
			</div>
		</vde-property>
	</div>
</div>